<ion-header>
  <ion-toolbar>
    <img
      src="http://101.96.128.94:9999/img/header/logo.png"
      alt=""
      slot="start"
    />
    <ion-searchbar placeholder="search" [debounce]="250"></ion-searchbar>
  </ion-toolbar>
</ion-header>
<ion-content *ngIf="res">
  <ion-slides
    pager
    [options]="{loop:true,autoplay:{disableOnInteraction:false}}"
  >
    <ion-slide *ngFor="let item of res.carouselItems">
      <img [src]="'http://101.96.128.94:9999/'+item.img" alt="" />
    </ion-slide>
  </ion-slides>

  <div *ngFor="let item of data()">
    <ion-item>
      <ion-icon slot="start" [name]="item.icon"></ion-icon>
      <ion-label>{{item.title}}</ion-label>
    </ion-item>

    <ion-grid fixed>
      <ion-row>
        <!-- 此处变量名不能写 item, 会与外层循环的 变量重名! -->
        <ion-col size="6" *ngFor="let item1 of item.data">
          <ion-card>
            <img [src]="'http://101.96.128.94:9999/'+item1.pic" alt="" />
            <div class="card-title">
              <span>{{item1.title}}</span>
              <span>{{item1.details}}</span>
            </div>
            <div style="color: brown">￥{{item1.price}}</div>
            <ion-button> 查看详情 </ion-button>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <ion-grid fixed>
    <ion-row>
      <ion-col *ngFor="let item of icons" style="text-align: center">
        <img [src]="'/assets/'+item" alt="" style="width: 50px; height: 50px" />
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
